<template>
    <div class="Details">
      <el-page-header @back="goBack"></el-page-header>
      <el-row>
        <el-col v-if="!info.isVideo" :span="13" class="left">
          <div class="img-wrap">
            <el-image
              :src="info.article.img"
              :lazy=true
            >
            </el-image>
          </div>
          <div class="note">
            <div class="note-top">
              {{info.article.title}}
            </div>
            <div class="content">
              <p v-for="content in info.article.contents">{{content}}</p>
            </div>
            <el-row class="tags">
              <el-col :span="12">
                <i class="el-icon-collection-tag"></i>
                {{info.article.like}}
              </el-col>
              <el-col :span="12">
                <i class="el-icon-star-off"></i>
                {{info.article.like}}
              </el-col>
            </el-row>
            <p class="time">发布于{{info.time}}</p>
          </div>
        </el-col>
        <el-col v-if="info.isVideo" :span="13" class="left">
          <div class="img-wrap">
            <video-player  class="video-player vjs-custom-skin"
                           ref="videoPlayer"
                           :playsinline="true"
                           :options="playerOptions"
            ></video-player>
          </div>
          <div class="note">
            <div class="note-top">
              {{info.video.title}}
            </div>
            <div class="content">
              <p v-for="content in info.video.contents">{{content}}</p>
            </div>
            <el-row class="tags">
              <el-col :span="12">
                <i class="el-icon-collection-tag"></i>
                {{info.video.like}}
              </el-col>
              <el-col :span="12">
                <i class="el-icon-star-off"></i>
                {{info.video.like}}
              </el-col>
            </el-row>
            <p class="time">发布于{{info.time}}</p>
          </div>
        </el-col>
        <el-col :span="10" :offset="1" class="right">
          <div class="author">
            <h3 class="title">笔记作者</h3>
            <div class="author-info">
              <el-avatar class="avatar" :size="avatarSize" :src="info.avatar"></el-avatar>
              <div  class="info">
                <div class="user">{{info.user}}</div>
                <div class="brief">{{info.brief}}</div>
              </div>
            </div>
            <el-row class="card-info">
              <el-col :span="8">
                <div>笔记</div>
                <div>{{info.card}}</div>
              </el-col>
              <el-col :span="8">
                <div>粉丝</div>
                <div>{{info.fans}}</div>
              </el-col>
              <el-col :span="8">
                <div>获赞与收藏</div>
                <div>{{info.collect}}</div>
              </el-col>
            </el-row>
          </div>
          <div class="about">
            <h3 class="title">相关笔记</h3>
            <div class="about-content">
              <div class="inner" v-for="inner in info.inners">
                <div class="picture">
                  <el-image
                    style="width: 80px; height: 80px"
                    :src='inner.image'
                    fit="fill">
                  </el-image>
                </div>
                <div class="content">
                  <p class="title">{{inner.title}}</p>
                  <div class="info">
                    <i class="icon-start el-icon-star-off"></i><span class="counts">{{inner.collect}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="end">查看更多</div>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
        name: "Details",
        watch:{
          info(){
            this.playerOptions.sources[0].src=this.info.video.src;
            this.playerOptions.poster=this.info.video.img;
          }
        },
        data() {
            return {
              avatarSize:50,
              img:'',
              info:{
                user:'', //用户
                avatar:'',//头像地址
                brief:'',//个性签名
                card:null,//曾经发表的文章或者视频的数量
                fans:null,//粉丝数
                collect:null,//收藏（点赞）数
                inners:[],//文章或者视频相关的文章或视频
                isVideo:null,//视频还是文章
                article:{ //文章相关
                  img:'',//图片地址
                  title:"",//标题
                  contents:[],//内容，按照段落划分
                  like:null,//点赞（收藏）数
                },
                video:{
                  img:'',
                  src:'',
                  title:"",
                  contents:[],
                  like:null
                },//视频地址，是文章就给空
                time:''//文章发表时间
              },
              infoTest:{
                user:'朱鑫淼',
                avatar:'https://img.xiaohongshu.com/setting/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg',
                brief:'暂时没有个性签名呦',
                card:700,
                fans:700,
                collect:700,
                inners:[
                  {image:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',title:'重庆小众拍照🔥不出重庆打卡欧洲N国！美爆‼',collect:88},
                  {image:'https://ci.xiaohongshu.com/e2c4176a-e63e-336c-be68-f9e6ff988bd4?imageView2/2/w/200/h/200/q/75/format/webp',title:'深圳首发🌹闯入浪漫法式玫瑰花海｜免费拍照',collect:77},
                  {image:'https://ci.xiaohongshu.com/8b4f0016-c1f5-389d-8e72-a96d87fb0e6f?imageView2/2/w/200/h/200/q/75/format/webp',title:'重庆拍照💖小圣托里尼✨假装在国外度假系列',collect:66},
                  {image:'https://ci.xiaohongshu.com/b90e30a8-00d4-39af-8950-d4996122fd32?imageView2/2/w/200/h/200/q/75/format/webp',title:'北京|看过中山公园的海棠雨吗？🌸',collect:55},
                ],
                isVideo:true,
                article:{
                  img:'https://image.watsons.com.cn//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080',
                  title:"最近浴室新宠，日系神仙好物了解一下～",
                  contents:[
                    "北京周末好去处｜北京拍照打卡｜北京摄影基地",
                    "🙋🏻今天分享的是紫谷伊甸园附近的一处小中宝藏地～所以安排了紫谷伊甸园拍照的姐妹可以一道儿打卡～毕竟有些姐妹远在东北五环，来一趟大丰台也不容易",
                    "🙋🏻我是👉🏻4.16去的，整个园区只有少量拍婚纱照的新人，基本上等于自己包场",
                    "📍丘比特全球旅拍婚纱摄影拍摄基地",
                    "👉🏻北京市大兴区紫光园36号丘比特庄园",
                    "📷这里和我去年推荐过的城市花园摄影基地-北京小圣托里尼一样，并不是公园也不是收费景点～是婚纱摄影基地‼️‼️‼️但是目前是【邀请制】对外开放的👌🏻",
                    "⏰最佳拍摄时间：上午十一点前或者下午三点后",
                    "⚠️整体建筑偏白色，光线很强的情况下容易过度曝光",
                    "整个庄园有一幢很大的实体欧式建筑，可以供外拍，园区内有多组大型雕塑，也非常出片儿；几组欧式的白柱加上大理石地面恍然有种到了阿布扎比谢赫扎伊德清真寺的感觉。",
                    "‼️而最让我惊喜的是，这组建筑可以登顶拍摄🎬从旋转楼梯到走廊顶层，能够和欧式尖顶以及蓝天同框，我去的时候当天刮大风，却恰巧有很多小白云☁️简直不要太美",
                    "‼️室内也有多处场景包括室内教堂、瀑布等等",
                    "📷今日穿搭",
                    "西装外套：",
                    "内搭：hollister三朵小花🌼短袖",
                    "裤子：优衣库奶白色阔腿裤",
                  ],
                  like:953,
                },
                video:{
                  img:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                  src:'http://v.xiaohongshu.com/e3b5a52c357d10b67806c47c446c09ad84a77e4e_v1?sign=468505aa9a6c603889e906d534c06a61&t=5ea1bb80',
                  title:"最近浴室新宠，日系神仙好物了解一下～",
                  contents:["永远的神"],
                  like:99
                },
                time:'2020-04-18 16:06'
              },
              playerOptions : {
                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                  type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                  src: "http://v.xiaohongshu.com/e3b5a52c357d10b67806c47c446c09ad84a77e4e_v1?sign=468505aa9a6c603889e906d534c06a61&t=5ea1bb80" //url地址
                }],
                poster: "static/images/banner1.jpg", //你的封面地址
                // width: document.documentElement.clientWidth, //播放器宽度
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                  timeDivider: true,
                  durationDisplay: true,
                  remainingTimeDisplay: false,
                  fullscreenToggle: true  //全屏按钮
                }
              }
            }
        },
        methods: {
          goBack() {
            this.$router.push({name:'VideoAndArticle'});
          }
        },
        mounted() {
        let id=this.$route.params.id;
        // this.info=this.infoTest;
          this.$axios({
            url:`http://47.92.167.153:8085/videoAndArticle/info/${id}`,
            method:'get',
          }).then((res)=>{
            res=res.data;
            if(res.success){
              res=res.data;
              this.info=res;
              // this.info=this.infoTest;
            }
          }).catch(function(error){
            console.log(error)
          });
        }
    }
</script>

<style scoped lang="stylus">
.Details
  width: 850px;
  padding-top: 60px;
  margin: 70px auto 0;
  padding-bottom: 36px;
  .left
    .img-wrap
      width 380px
      margin 0 auto
    .note
      .note-top
        font-size: 21px;
        font-weight: 500;
        overflow: hidden;
        margin-top: 18px;
      .content
        >p
          margin 20px auto
      .tags
        width 300px
        margin-bottom 30px
        .el-col
          font-size 20px
          >i
            font-size 20px
      .time
        color: #999;
  .right
    .author
      border: 1px solid #eee;
      .title
        font-weight: 500;
        font-size: 16px;
        padding: 10px 0 10px 20px;
        margin: 0;
        border-bottom: 1px solid #eee;
      .author-info
        margin: 10px 20px 0;
        padding: 0 0 10px;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        .avatar
          float left
        .info
          margin: 2px 0 0 65px;
          .user
            margin: 3px 0 0;
            font-weight: 500;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            height: 20px;
            word-wrap: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          .brief
            height: 20px;
            color: #999;
            overflow: hidden;
            white-space: nowrap;
            word-wrap: normal;
            text-overflow: ellipsis;
      .card-info
        overflow: hidden;
        margin: 8px 20px;
        .el-col
          font-size 14px
          text-align center
          >div
            &:nth-child(1)
              color: #999;
    .about
      border: 1px solid #eee;
      margin-top 30px
      .title
        font-weight: 500;
        font-size: 16px;
        padding: 10px 0 10px 20px;
        margin: 0;
        border-bottom: 1px solid #eee;
      .about-content
        box-sizing border-box
        padding-top 15px
        .inner
          width: 280px;
          height: 80px;
          margin: 10px 20px;
          display: block;
          color: #555;
          .picture
            position: relative;
            margin: 0 10px 0 0;
            overflow: hidden;
            float: left;
            background: #f8f8fa;
            width: 80px;
            height: 80px;
            border-radius: 4px;
            .el-image
              width 80px
              height 80px
          .content
            float: left;
            width: 190px;
            margin: 3px 0 0;
            .title
              font-size: 14px;
              line-height: 20px;
              height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              margin: 0;
            .info
              margin: 3px 0 0;
              color: #999;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              height: 15px;
              .icon-start
                font-size 15px
                margin-right 10px
      .end
        border-top: 1px solid #eee;
        text-align: center;
        margin: 0 20px;
        padding: 5px 0 5px;
        cursor: pointer;
        color: #555;
        &:hover
          color #FF0027
  .el-page-header
    position fixed
    top 70px
    left 0
    .el-page-header__left
      .el-icon-back
        font-size 20px
      .el-page-header__title
        font-size 16px
</style>
